<template>
  <div class="articleDetail">
    <div class="article-container">
      <div class="article-header">
        <!-- 文章标题 -->
        <div class="article-title">{{ source.title }}</div>
        <div class="first-line">
          <!-- 发表人 -->
          <span>
              <i class="iconfont icon-yonghutianchong"/>
<!--              {{ source.author.nickname }}-->
          </span>
          <!-- 发表时间 -->
          <span>
              <i class="iconfont icon-shijian"/>
              于{{ source.createTime }}发布
          </span>
          <!-- 阅读量 -->
          <span>
              <i class="iconfont icon-chakan"/> 阅读量：{{ source.quantity }}
          </span>
          <!-- 评论量 -->
          <span>
              <i class="iconfont icon-pinglun1"/>评论数：{{ source.comments.length }}
          </span>
        </div>
      </div>

      <el-divider></el-divider>

      <mavon-editor class="article-content" v-model="source.contentMd"
                    :subfield="false"
                    :defaultOpen="'preview'"
                    :editable="false"
                    :toolbarsFlag="false"
                    :navigation="false"
                    ref="markdown"
      >
      </mavon-editor>

      <el-divider></el-divider>

      <div class="copyright">
        <div class="copyrightItem">
          <i class="iconfont icon-yonghutianchong"></i>
          <span>版权归属：</span><span> 强哥</span>
        </div>
        <div class="copyrightItem">
          <i class="iconfont icon-lianjie"></i>
          <span>本文链接：</span><span>https://www.qiangesoft.cn/article/1</span>
        </div>
        <div class="copyrightItem">
          <i class="iconfont icon-guanyuwo"></i>
          <span>许可协议：</span><span> 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明文章出处。 </span>
        </div>
      </div>
    </div>
    <el-card class="article-toc">
      <div slot="header" class="box-header">
        <span><i class="iconfont icon-guanyuwo"/>文章目录</span>
      </div>
      <!-- 遍历目录 -->
      <div class="toc">
        <div class="toc-item" v-for="toc in tocs" :key="toc.href">
          <a @click="scrollToPosition(toc.href)" v-html="toc.name"
             :style="{'font-size':toc.fontSize, 'margin-left': toc.suojin}"></a>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getSourceInfo} from "@/api/source";
import {offsetDomTop, scrolltoToc} from "@/views/article/index";

export default {
  name: 'sourceDetail',
  data() {
    return {
      sourceId: this.$route.params.sourceId,
      source: {
        contentMd: '',
        author: {},
        comments: []
      },
      tocs: []
    };
  },
  mounted() {
    this.getSourceInfo(this.sourceId);

    // 延迟1000毫秒执行
    setTimeout(() => {
      this.$nextTick(() => {
        const aArr = this.$refs.markdown.$refs.vShowContent.querySelectorAll("a");
        let tocs = [];
        for (var i = 0; i < aArr.length; i++) {
          if (aArr[i].id) {
            let href = aArr[i].id;
            let name = aArr[i].parentNode.innerText;
            let tagName = aArr[i].parentNode.tagName;
            let fontSize = '';
            let suojin = '';
            if (tagName === 'H1') {
              fontSize = '20px';
              suojin = '0px';
            }
            if (tagName === 'H2') {
              fontSize = '18px';
              suojin = '5px';
            }
            if (tagName === 'H3') {
              fontSize = '16px';
              suojin = '10px';
            }
            if (tagName === 'H4') {
              fontSize = '14px';
              suojin = '15px';
            }
            if (tagName === 'H5') {
              fontSize = '12px';
              suojin = '20px';
            }
            if (tagName === 'H6') {
              fontSize = '10px';
              suojin = '25px';
            }
            tocs.push({
              href: href,
              name: name,
              fontSize: fontSize,
              suojin: suojin
            });
          }
        }
        this.tocs = tocs;
      });
    }, 1000)
  },
  methods: {
    getSourceInfo(sourceId) {
      getSourceInfo(sourceId).then(res => {
        this.source = res.data;
      })
    },
    scrollToPosition(id) {
      var position = offsetDomTop(document.getElementById(id));
      position.top = position.top - 80;
      scrolltoToc(position.top);
    }
  }
}
</script>

<style scoped>
.articleDetail {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
}

.article-container {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
  width: 78%;
}

.article-header {
  margin: 20px 20px;
}

.article-title {
  line-height: 80px;
  text-align: center;
  font-size: 2.5rem;
}

.first-line {
  margin: 15px 0;
}

.first-line span {
  margin-right: 20px;
}

.article-category {
  margin-right: 40px;
}

a {
  text-decoration: none;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 0 0;
}

.article-content {
  width: 100%;
}

.article-toc {
  margin-left: 59%;
  width: 16%;
  height: 650px;
  background-color: #fff;
  overflow: auto;
  position: fixed;
}

.toc-item {
  margin: 10px 0;
}

.toc-item a:hover {
  color: #fb6c28;
}

.copyright {
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 12px 0px;
}

.copyrightItem {
  padding: 10px 10px;
}
</style>
